<template>
  <view class="page-container">
    
    <!-- 表单内容 -->
    <form class="form-container" @submit="submitForm" @reset="resetForm">
      <!-- 持卡人 -->
      <view class="form-item">
        <text class="form-label">持卡人</text>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入持卡人姓名" 
          v-model="formData.holderName"
          name="holderName"
          maxlength="20"
          :disabled="isSubmitting"
        ></input>
      </view>
      
      <!-- 银行卡号 -->
      <view class="form-item">
        <text class="form-label">银行卡号</text>
        <input 
          class="form-input" 
          type="text" 
          placeholder="请输入银行卡号" 
          v-model="formattedCardNumber"
          name="cardNumber"
          @input="formatCardNumber"
          maxlength="23"
          :disabled="isSubmitting"
        ></input>
      </view>
      
      <!-- 银行选择 -->
      <view class="form-item">
        <text class="form-label">所属银行</text>
        <picker 
          class="form-picker" 
          mode="selector" 
          :range="bankList" 
          :value="selectedBankIndex" 
          @change="onBankChange"
          :disabled="isSubmitting"
        >
          <view class="picker-view">
            {{ selectedBankIndex !== -1 ? bankList[selectedBankIndex] : '请选择银行' }}
          </view>
        </picker>
      </view>
      
      <!-- 卡片类型 -->
      <view class="form-item">
        <text class="form-label">卡片类型</text>
       
          <view class="picker-view">
            储蓄卡
          </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="form-submit">
        <button 
          class="submit-btn" 
          form-type="submit"
          :loading="isSubmitting"
        >
          确认
        </button>
      </view>
      
      <!-- 提示信息 -->
      <view class="form-tips">
        <text>绑定银行卡仅用于提现</text>
      </view>
    </form>
  </view>
</template>

<script>
	import { request } from '@/utils/request.js'
export default {
  data() {
    return {
      // 表单数据
      formData: {
        holderName: '',
        cardNumber: '',
        bankName: '',
        cardType: '',
        phone: '',
        verifyCode: ''
      },
      // 格式化后的卡号（带空格）
      formattedCardNumber: '',
      // 银行列表
      bankList: ['请选择',
        '中国工商银行', '中国农业银行', '中国银行', '中国建设银行',
        '交通银行', '招商银行', '浦发银行', '民生银行',
        '兴业银行', '平安银行', '中信银行', '光大银行',
        '华夏银行', '广发银行', '中国邮政储蓄银行'
      ],
      // 卡片类型
      cardTypes: ['储蓄卡', '信用卡'],
      // 选中的银行索引
      selectedBankIndex: 0,
      // 选中的卡片类型索引
      selectedCardTypeIndex: -1,
      // 倒计时相关
      isCountingDown: false,
      countDownSeconds: 60,
      // 提交状态
      isSubmitting: false
    };
  },
  computed: {
    // 是否可以发送验证码
    canSendCode() {
      // 手机号格式验证
      const phoneReg = /^1[3-9]\d{9}$/;
      return phoneReg.test(this.formData.phone);
    }
  },
  methods: {
    // 返回上一页
    navigateBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    
    // 格式化银行卡号（每4位加空格）
    formatCardNumber(e) {
      // 去除所有空格和非数字字符
      let value = e.detail.value.replace(/\s/g, '').replace(/[^\d]/g, '');
      
      // 每4位添加一个空格
      let formattedValue = '';
      for (let i = 0; i < value.length; i++) {
        if (i > 0 && i % 4 === 0) {
          formattedValue += ' ';
        }
        formattedValue += value[i];
      }
      
      // 更新格式化后的值
      this.formattedCardNumber = formattedValue;
      
      // 更新实际卡号（无空格）
      this.formData.cardNumber = value;
    },
    
    // 银行选择变化
    onBankChange(e) {
      this.selectedBankIndex = e.detail.value;
      this.formData.bankName = this.bankList[this.selectedBankIndex];
    },
    
    // 卡片类型选择变化
    onCardTypeChange(e) {
      this.selectedCardTypeIndex = e.detail.value;
      this.formData.cardType = this.cardTypes[this.selectedCardTypeIndex];
    },
    
    
    // 表单提交
    submitForm() {
      // 表单验证
      if (!this.formData.holderName.trim()) {
        this.showError('请输入持卡人姓名');
        return;
      }
      
      if (!this.formData.cardNumber || this.formData.cardNumber.length < 16) {
        this.showError('请输入正确的银行卡号');
        return;
      }
      
      if (this.selectedBankIndex ==0) {
        this.showError('请选择所属银行');
        return;
      }
     
      // 模拟提交
      
        
        // 生成银行卡ID
        // 获取卡号后四位
        
        // 构造银行卡数据
        const newCard = {
          bank_name: this.formData.bankName,
          bank_card: this.formData.cardNumber,
          name: this.formData.holderName
        };
        
        // 从本地存储获取现有银行卡列表
        // 添加新银行卡
        // 保存到本地存储
        
        // 提示成功并返回列表页
       
			request({
				url: 'user/bind-save',
				method: 'post',
				data:newCard
			}).then(res => {
				if (res.status == 200) {
					uni.showToast({
					  title: '绑定成功',
					  icon: 'success',
					  duration: 2000
					});
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
			}).catch((err) => {
				uni.showToast({
					title: err.message,
					icon: 'none',
					duration: 2000
				});
			})
          // uni.navigateBack({
          //   delta: 1
          // });
    },
    
    // 重置表单
    resetForm() {
      this.formData = {
        holderName: '',
        cardNumber: '',
        bankName: '',
        cardType: '',
        phone: '',
        verifyCode: ''
      };
      this.formattedCardNumber = '';
      this.selectedBankIndex = -1;
      this.selectedCardTypeIndex = -1;
    },
    
    // 显示错误提示
    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      });
    },
    
    // 显示用户协议
    showAgreement() {
      uni.showModal({
        title: '用户服务协议',
        content: '此处为用户服务协议内容...',
        showCancel: false,
        confirmText: '我已阅读并同意'
      });
    }
  }
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 99;
}

.back-btn {
  background-color: transparent;
  padding: 8px;
  margin: 0;
  line-height: 1;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.navbar-right {
  width: 40px; /* 占位，使标题居中 */
}

/* 表单样式 */
.form-container {
  padding: 16px;
}

.form-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 0 16px;
  height: 56px;
  margin-bottom: 10px;
}

.form-label {
  width: 90px;
  font-size: 16px;
  color: #333;
  flex-shrink: 0;
}

.form-input {
  flex: 1;
  height: 100%;
  font-size: 16px;
  color: #333;
  padding: 0;
  margin: 0;
}

.form-input::placeholder {
  color: #ccc;
}

.form-picker {
  flex: 1;
}

.picker-view {
  width: 100%;
  font-size: 16px;
  color: #333;
  padding: 10px 0;
}

.picker-view:empty::after {
  content: '请选择银行';
  color: #ccc;
}

/* 验证码区域 */
.verify-code-container {
  flex: 1;
  display: flex;
  align-items: center;
}

.verify-input {
  flex: 1;
  height: 100%;
  font-size: 16px;
  color: #333;
  padding: 0;
  margin: 0;
}

.get-code-btn {
  background-color: #f0f0f0;
  color: #007aff;
  height: 36px;
  line-height: 36px;
  padding: 0 15px;
  border-radius: 18px;
  font-size: 14px;
  margin-left: 10px;
}

.get-code-btn:disabled {
  background-color: #f0f0f0;
  color: #ccc;
}

/* 提交按钮 */
.form-submit {
  padding: 20px 0;
}

.submit-btn {
  background-color: #007aff;
  color: #fff;
  height: 48px;
  line-height: 48px;
  border-radius: 24px;
  font-size: 16px;
  width: 100%;
}

/* 提示信息 */
.form-tips {
  text-align: center;
  font-size: 14px;
  color: #999;
  margin-top: 10px;
}

.agreement {
  color: #007aff;
  text-decoration: underline;
}
</style>
